<script>
import {carousel} from "@/API/http";

export default {
  name: "CarouselPage",
  data(){
    return{
        CarouselList:[]
    }
  },
  methods:{

  },
  created() {
    carousel().then(res=>{
      this.CarouselList=res.data;
    })
      // carousel().then(res=>{
      //   this.CarouselList=res.data;
      // })
  }

}
</script>

<template>
<div>
  <div class="CarouselBox">
    <div class="CarouselItem" >
      <a-carousel arrows >
        <div
            slot="prevArrow"
            class="custom-slick-arrow"
            style="left: 10px;zIndex: 1"
        >
          <a-icon type="left-circle" />
        </div>
        <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
          <a-icon type="right-circle" />
        </div>
        <div  v-for="item in CarouselList" :key="item.Id">
          <img  :src="item.imgUrl" alt="" style="width: 100%;height: 400px">
        </div>

      </a-carousel>
    </div>

  </div>
  <div class="w bannerBox">
      <div class="banneritem">
        <img class="banneritemImg" src="../../../assets/vip钻石.png" alt="" width="38">
        <p class="banneritemP">仅需198即可观看所有付费课程</p>
        <div class="banneritemVipBtn">开通VIP</div>
      </div>
  </div>
</div>
</template>

<style scoped>

.CarouselBox{
  margin-top: -45px;
  border-radius: 15px;
  background-color: white;
  padding: 15px;
}
.CarouselItem{
  height: 400px;
  overflow: hidden;
  border-radius: 15px;
}
.ant-carousel >>> .slick-slide {
  text-align: center;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}

.bannerBox{
  margin: 20px 0;
}
.banneritem{
  height: 50px;
  background: url("../../../assets/vip-line.f590fe35.png") no-repeat;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banneritemP{
  margin: 0 20px;
  font-size: 18px;
  color: #5a544d;
}
.banneritemVipBtn{
  color: white;
  border-radius: 20px;
  padding:5px 10px;
  background: #6e421a;
  font-weight: bold;
}

</style>